  <template>
  <div class="comment">
    <div class="comment_center">
      <el-table :data="commentList" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"></el-table-column>
        <el-table-column prop="content" label="评论内容" width="250">
        </el-table-column>
        <el-table-column prop="commentTime" label="评论时间" width="250">
        </el-table-column>
        <el-table-column prop="orderId" label="产品ID" width="200">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="200">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a href="#" @click="deleteById(scope.row)">删除</a>
            <a href="#" @click="updatecomment(scope.row)">编辑</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="comment_footer">
      <!-- -----------分页------------- -->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

  <script>
import Qs from "querystring";
export default {
  data() {
    return {
      //表单内容
      input: "",
      // 产品数据
      comment: [],
      // 当前点击分页
      currentPage: 1,
      //实际请求分页
      requirePage: 0,
      // 产品渲染个数
      pageSize: 10,
      //产品总数
      total: 0,
    };
  },
  methods: {
    //分页发送请求
    // 形参name用来接收 产品名称 查询
    comment_axios(name) {
      if (name) {
        //查询
        var data = {
          page: this.requirePage,
          pageSize: this.pageSize,
          name: name,
        };
      } else {
        var data = {
          page: this.requirePage,
          pageSize: this.pageSize,
        };
      }
      this.$axios.post("/comment/query", Qs.stringify(data)).then((respond) => {
        this.comment = respond.data.data.list;
        this.total = respond.data.data.total;
        this.commentTime = new Date(
          respond.data.data.list.commentTime
        ).toLocaleString();
      });
    },
    // 分页函数
    handleCurrentChange(val) {
      this.requirePage = val - 1;
      this.comment_axios();
    },
    //删除按钮
    deleteById(row) {
      let that = this;
      let id = row.id;
      that.$axios
        .get("/comment/deleteById", {
          params: {
            id: id,
          },
        })
        .then((respond) => {
          if (respond.data.status === 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.currentPage = 1;
            this.requirePage = 0;
            that.comment_axios();
          } else {
            this.$message.error("删除失败");
          }
        });
    },
  },
  computed: {
    commentList() {
      this.comment.forEach(function (item) {
        item.commentTime = new Date(item.commentTime).toLocaleString();
      });
      return this.comment;
    },
  },
  created() {
    this.comment_axios();
  },
};
</script>

  <style lang="scss" scoped>
.comment {
  padding: 20px;

  .comment_top .el-input {
    width: 20%;
    margin: 0 10px;
  }

  .comment_center a {
    padding-right: 10px;
  }

  .comment_center a:hover {
    color: #409eff;
  }

  .el-dialog .note {
    color: #999999;
    font-size: 12px;
  }
}
</style>
